<template>
  <div class="r_flex CityInput">
    <el-select v-model="cityKey" :style="width100?'width: 100%;':''" filterable :multiple="multiple" collapse-tags placeholder="请选择" @change="cityChange">
      <el-option
        v-for="item in cityData"
        :key="item.value"
        :label="`${item.cprovince} - ${item.cname}`"
        :value="item.ccode"
      />
    </el-select>
  </div>
</template>

<script>
import { cityList } from '@/api/business/city'

export default {
  name: 'CityInput',
  props: {
    // 城市 - 单选/多选
    multiple: {
      type: Boolean,
      default: false
    },
    // 城市 - input宽度100%/宽度默认
    width100: {
      type: Boolean,
      default: false
    },
    // 全选
    allchecked: {
      type: Boolean,
      default: false
    },
  },
  data() {
    return {
      cityData: [],
      cityKey: '',
      checked: true,
    }
  },
  created() {
    // 拉取城市数据
    this.getList()
  },
  mounted() {

  },
  methods: {
    /** 查询城市数据 */
    getList() {
      this.loading = true
      cityList(this.queryParams).then(response => {
        this.cityData = response.rows
      })
    },
    // 选择城市后
    cityChange(data) {
      let newparm = ''
      if (this.multiple) {
        // 双数组遍历 终究无敌简洁优雅版
        newparm = this.cityKey.map((keyID) => this.cityData.filter((value) => { if (keyID === value.ccode) { return value } })[0])
      } else {
        newparm = this.cityData.filter((value) => { if (this.cityKey === value.ccode) { return value } })
      }
      this.$emit('selectCity', newparm)
    }
  }
}
</script>

<style lang="scss">

.Upimg {
  .upThemeOne {
    width: 100px;
    height: 150px;
    border-radius: 5px;
    border: 1px dashed #dfe6ec;
    &:hover{
      border-color: #1890ff;
      color: #1890ff;
    }
  }
  .el-upload-list {
    display: none;
  }
  .up_img{
    cursor: pointer;
    position: relative;
    width: 100px;
    height: 150px;
    overflow: hidden;
    border-radius: 5px;
    border: 1px solid #dfe6ec;
    margin-right: 10px;
    img{
      width: 100%;
    }
    .del_img{
      display: none;
      position: absolute;
      left: 0;
      top: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.4);
      color: #fff;
    }
    &:hover{
      border-color: #1890ff;
      color: #1890ff;
      .del_img{
        display: flex;
      }
    }
  }
}
</style>
